<template>
  <div>
    <van-tabbar v-model="active" route placeholder @change="change" active-color="#BE334F">
      <van-tabbar-item
        :icon="item.icon"
        v-for="(item,index) in footerList"
        :key="index"
        :to="item.to"
        fixed
        :class="{isactive:active==index}"
      >{{item.name}}</van-tabbar-item>
      <span class="badge">4</span>
    </van-tabbar>
  </div>
</template>

<script>
import noindex from "@/assets/image/no-index.png";
import noclassify from "@/assets/image/no-classify.png";
import nospecial from "@/assets/image/no-special.png";
import nocart from "@/assets/image/no-cart.png";
import nomine from "@/assets/image/no-mine.png";
import classify from "@/assets/image/classify.png";
import special from "@/assets/image/special.png";
import cart from "@/assets/image/cart.png";
import index from "@/assets/image/index.png";
import mine from "@/assets/image/mine.png";
export default {
  data() {
    return {
      changed: [index, classify, special, cart, mine],
      nochanged: [noindex, noclassify, nospecial, nocart, nomine],
      footerList: [
        {
          icon: noindex,
          name: "首页",
          to: "/index",
        },
        {
          icon: noclassify,
          name: "分类",
          to: "/classify",
        },
        {
          icon: nospecial,
          name: "专题",
          to: "/special",
        },
        {
          icon: nocart,
          name: "购物车",
          to: "/cart",
        },
        {
          icon: nomine,
          name: "我的",
          to: "/mine",
        },
      ],
      active: sessionStorage.getItem("index") || 0,
    };
  },
  mounted() {
    // console.log(this.active)
    this.footerList[this.active].icon = this.changed[this.active];
  },
  methods: {
    change(active) {
      this.footerList.forEach((item, index) => {
        item.icon = this.nochanged[index];
      });
      sessionStorage.setItem("index", this.active);
      this.footerList[active].icon = this.changed[active];
    },
  },
};
</script>

<style lang="stylus">
.van-tabbar--fixed {
  z-index: 200;
  background: #fff;
  border-top: 1px #E9E9E9 solid;
  color: #A0A0A0;

  .van-tabbar-item__text {
    font-size: 9px;
    font-weight: bold;
    margin-top: -5px;
  }

  .isactive {
    color: #BE334F;
  }

  img {
    height: 30px;
    width: 30px;
  }

  .badge {
    font-size 10px
    line-height 15px
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #CA013D;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 3px;
    right: 90px;
  }
}
</style>